<template>
  <div class="images-detail">
    <div class="detail-header">
      <h3>{{ imagesDetail.title }}</h3>
      <span style="marginRight: 10px;">发布日期：{{ imagesDetail.add_title | formatDate('YYYY-MM-DD') }}</span>
      <span>{{ imagesDetail.click }}次浏览</span>
    </div>
    <div class="thumbnail-box">
      <vue-preview :slides="formatThumbImages"></vue-preview>
    </div>
    <!-- 要修改vhtml里面的样式，因为相当于是nextTick的方式，组件隔离了，所以也需要去掉scoped或者写在global里面 -->
    <div class="detail-content" v-html="imagesDetail.content"></div>
    <!-- 评论组件, 传递参数id不写this也是可以的 -->
    <comment :id="this.$route.query.detailId"></comment>
  </div>
</template>

<script>
import { mapActions, mapState, mapGetters } from 'vuex';
export default {
  methods: {
    ...mapActions('home/imagesDetailStore', ['getImagesDetail', 'getImagesThumbnail']),
  },
  computed: {
    ...mapState('home/imagesDetailStore', ['imagesDetail', 'thumbnailImages']),
    ...mapGetters('home/imagesDetailStore', ['formatThumbImages'])
  },
  created () {
    const { detailId } = this.$route.query;
    this.getImagesThumbnail({
      payload: {
        detailId,
      }
    })
    this.getImagesDetail({
      payload: {
        detailId,
      }
    })
  }
}
</script>

<style lang="less">
  .images-detail {
    padding: 10px;
    .detail-header {
      margin-bottom: 5px;
    }
    .thumbnail-box {
      // 这里修改样式要把scoped去掉或者写在global里面，这是因为是两个组件，组件的作用域不同了
      .my-gallery {
        display: flex;
        flex-wrap: wrap;
        figure {
          margin: 0;
          width: 33.3%;
          border: 1px solid #bbb;
          box-sizing: border-box;
          margin-bottom: 5px;
        }
        
      }
    }
    .detail-content {
      text-indent: 32px;
    }
  }
</style>